<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>本页面演示定位相关效果(1)</title>
		<style>
			body{
				padding: 10px;
			}
			div{
				width: 150px;
				height: 150px;
				overflow: hidden;
			
			}
			div img{
				height: 100px;
			}
			#div1{
				background-color: green;
			}
			#div2{
				background-color: red;
			}
			#div3{
				/*容器设为固定定位。不会影响到子元素的固定定位*/
				position: fixed;
				left: 300px;
				top: 100px;
				border: #006400 solid 1px;
			}
			#div2 img{
				/*absolute会设置为绝对定位。配合left,top可以设置元素在页面的绝对位置*/
				position: absolute;
				left: 0;
				top: 5px;
				z-index: 999 !important;
			}
			#div3 img{
				position: fixed;
				left: 10px;
				top: 15px;
				z-index: 1000 !important;
			}
			
			/*演示绝对定位嵌套时候的效果*/
			#div4 {
				width: 200px;
				height: 200px;
				background-color: #FFC0CB;
			}
			.abs{
				position: absolute;
				left: 50px;
				top: 50px;
				z-index: 1000 !important;
			}
			.abs2{
				position: absolute;
 				top: 1000px;
				left: 1000px;
				right: 1000px;
				bottom: 1000px;
				
			}
			#div8, #div9{
				background-color: #8A2BE2;
				
			}
			#div7{
				background-color: #FFA500;
				
			}
			#div8{
				border: #ADFF2F solid 1px;
				position: relative;
				left: 100px;
				top: 100px;
			}
			#div8 img{
				position: relative;
				left: 200px;
				top: 200px;
			}
			
			#div9, #div10{
				
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<img src="../20190228/0.jpg" />
		</div>
		
		<div id="div2">
			<img src="../20190228/imgs/5.jpg" />
		</div>
		
		<div id="div3">
			<img src="../20190305/imgs/2.png" />
		</div>
		
		<div id="div4" class="abs2" style="">
			<div>
				<div class="abs">
					<img src="../20190305/imgs/2.png" />
				</div>
			</div>
		</div>
		
		<br clear="all" />
		<div id="div7"></div>
		<div id="div8">
			<div>
				<!--该图片为相对定位。但即便超出div8的大小。也仍然会被隐藏-->
				<img src="../res/3.jpg" />
			</div>
		</div>
		<div id="div9">
			
		</div>
		
		<div id="div10">
			
		</div>
		 
		<div id="div11">
			
		</div>
	</body>
</html>
